<template>
    <!-- pages/myincome/incomedetails/index.wxml -->
    <view>
        <van-tabs
            :active="active"
            @change="onChange"
            title-active-color="#333333"
            title-inactive-color="#999999"
            nav-class="nav-class"
            custom-class="custom-class"
            :ellipsis="false"
        >
            <van-tab title="全部">
                <view class="allbox">
                    <view class="flexbox-sb">
                        <view class="centers alltext2" @tap="onShowpopup">
                            <view class="mr-10">{{ typetit }}</view>
                            <view class="sj"></view>
                        </view>
                        <view class="alltext1">总收益：¥{{ monthincome }}</view>
                    </view>
                    <view class="flexbox-sb box2" v-if="IncomeInfoList.length > 0" v-for="(item, index) in IncomeInfoList" :key="index">
                        <view>
                            <view class="box2text1">{{ item.name ? item.name : '暂无昵称' }}</view>
                            <view class="box2text4">{{ item.remark }}</view>
                            <view>
                                <text class="box2text2">{{ item.time }}</text>
                            </view>
                        </view>

                        <view>
                            <view class="box2text3">{{ item.income }}</view>
                            <view class="box2text6">{{ item.description }}</view>
                            <!-- <view class="box2text6">待发放</view> -->
                        </view>
                    </view>
                    <van-empty v-if="IncomeInfoList.length == 0" description="暂无数据" />
                </view>
            </van-tab>
            <van-tab title="待发放收益">
                <view class="allbox">
                    <view class="flexbox-sb">
                        <view class="centers alltext2" @tap="onShowpopup">
                            <view class="mr-10">{{ typetit }}</view>
                            <view class="sj"></view>
                        </view>
                        <view class="alltext1">总收益：¥{{ monthincome }}</view>
                    </view>
                    <view class="flexbox-sb box2" v-if="IncomeInfoList.length > 0" v-for="(item, index) in IncomeInfoList" :key="index">
                        <view>
                            <view class="box2text1">{{ item.name ? item.name : '暂无昵称' }}</view>
                            <view class="box2text4">{{ item.remark }}</view>
                            <view>
                                <text class="box2text2">{{ item.time }}</text>
                            </view>
                        </view>

                        <view>
                            <view class="box2text3">+{{ item.income }}</view>
                            <view class="box2text6">{{ item.description }}</view>
                            <!-- <view class="box2text6">待发放</view> -->
                        </view>
                    </view>
                    <van-empty v-if="IncomeInfoList.length == 0" description="暂无数据" />
                </view>
            </van-tab>
            <van-tab title="已发放收益">
                <view class="allbox">
                    <view class="flexbox-sb">
                        <view class="centers alltext2" @tap="onShowpopup">
                            <view class="mr-10">{{ typetit }}</view>
                            <view class="sj"></view>
                        </view>
                        <view class="alltext1">总收益：¥{{ monthincome }}</view>
                    </view>
                    <view class="flexbox-sb box2" v-if="IncomeInfoList.length > 0" v-for="(item, index) in IncomeInfoList" :key="index">
                        <view>
                            <view class="box2text1">{{ item.name ? item.name : '暂无昵称' }}</view>
                            <view class="box2text4">{{ item.remark }}</view>
                            <view>
                                <text class="box2text2">{{ item.time }}</text>
                            </view>
                        </view>

                        <view>
                            <view class="box2text3">+{{ item.income }}</view>
                            <view class="box2text6">{{ item.description }}</view>
                            <!-- <view class="box2text6">待发放</view> -->
                        </view>
                    </view>
                    <van-empty v-if="IncomeInfoList.length == 0" description="暂无数据" />
                </view>
            </van-tab>
        </van-tabs>
        <van-popup :show="show" round position="bottom" custom-style="height: 340px" @close="onClose" close-icon="cross" closeable>
            <view class="pbox mt-100">
                <van-picker
                    show-toolbar
                    title="标题"
                    :columns="showList"
                    @cancel="onCancel"
                    @change="onInput"
                    :show-toolbar="false"
                    custom-class="pbox"
                    visible-item-count="5"
                    :default-index="index"
                />
            </view>

            <view class="btn" @tap="onType">确定</view>
        </van-popup>
    </view>
</template>

<script>
// pages/myincome/incomedetails/index.js
const app = getApp(); // 引入app

import _request from '../../../utils/request.js';
import { getTime } from '../../../utils/util.js';
export default {
    data() {
        return {
            imgUrl: app.globalData.imgUrl,

            //全局img路径
            showList: ['全部', '商品订单收益', '推荐创客收益', '服务订单收益', '推荐新人收益'],

            typetit: '全部',
            typetit1: '',
            show: false,
            IncomeInfoList: [],
            page: 1,
            month: '',
            status: 0,
            type: 0,
            monthincome: 0,
            index: 1,
            active: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        const { page, month, status, type } = this;
        this.getIncomeInfo(page, month, status, type, false);
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
        this.setData({
            page: 1
        });
        const { page, month, status, type } = this;
        this.getIncomeInfo(1, month, status, type, true);
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        const { page, month, status, type } = this;
        this.setData({
            page: page + 1
        });
        this.getIncomeInfo(this.page, month, status, type, true);
    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        onChange(event) {
            const { index } = event.detail;
            const { page, month, status, type } = this;
            this.setData({
                status: index,
                IncomeInfoList: [],
                monthincome: 0,
                typetit: '全部',
                typetit1: '全部',
                index: 1
            });
            this.getIncomeInfo(1, month, this.status, 0, false);
        },

        // 关闭窗口
        onClose() {
            this.setData({
                show: false
            });
        },

        // 展示
        onShowpopup() {
            this.setData({
                show: true
            });
        },

        // 收益列表类型 0全部，1商品订单收益，2推荐创客收益，3服务订单收益，4推荐新人收益
        onInput(event) {
            this.setData({
                type: event.detail.index,
                typetit1: event.detail.value
            });
        },

        // 确定
        onType() {
            const { page, month, status, type, typetit1 } = this;
            this.setData({
                show: false,
                IncomeInfoList: [],
                monthincome: 0,
                typetit: typetit1,
                page: 1
            });
            this.getIncomeInfo(this.page, month, status, type, false);
        },

        // 收益列表
        getIncomeInfo(page, month, status, type, show) {
            if (show) {
                uni.showNavigationBarLoading(); // 顶部加载状态
            }

            _request
                .postObj('/recomUser/recommendIncomeInfoByUserId', {
                    userId: uni.getStorageSync('userid'),
                    page,
                    pageSize: 10,
                    month,
                    status,
                    type
                })
                .then((res) => {
                    if (res.data.data != null && res.data.data.length > 0) {
                        let list = res.data.data.map((item) => {
                            item.time = getTime(item.time, 1);
                            return item;
                        });
                        this.setData({
                            IncomeInfoList: page > 1 ? [...this.IncomeInfoList, ...list] : list,
                            monthincome: res.data.data[0].monthincome
                        });
                    }

                    if (show) {
                        uni.hideNavigationBarLoading(); //完成停止加载

                        uni.stopPullDownRefresh(); //停止下拉刷新
                    }
                })
                .catch((error) => {
                    console.log(error);

                    if (show) {
                        uni.hideNavigationBarLoading(); //完成停止加载

                        uni.stopPullDownRefresh(); //停止下拉刷新
                    }
                });
        },

        onCancel() {
            console.log('占位：函数 onCancel 未声明');
        }
    }
};
</script>
<style>
/* pages/myincome/incomedetails/index.wxss */

/* 全部 */

.allbox {
    padding: 40rpx;
}

.box2 {
    height: 184rpx;
    border-bottom: 1px solid #ededed;
    align-items: center;
}

.box2text1 {
    height: 44rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 44rpx;
    width: 100%;
}

.box2text2 {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 34rpx;
    width: 100%;
}

.box2text3 {
    height: 50rpx;
    font-size: 36rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ff8722;
    line-height: 50rpx;
}

.box2text4 {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 34rpx;
}

.box2text5 {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 34rpx;
    text-align: right;
}

.box2text6 {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ff4122;
    line-height: 34rpx;
    text-align: right;
}

.alltext1 {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 34rpx;
}

.alltext2 {
    height: 40rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 40rpx;
}

.sj {
    width: 0px;
    height: 0px;
    border-top: 12rpx solid #333333;
    border-left: 12rpx solid transparent;
    border-right: 12rpx solid transparent;
}

/* 待发放收益 */

/* 已发放收益 */

/* 弹窗 */
.pbox {
    height: 360rpx;
}

.btn {
    width: 400rpx;
    height: 88rpx;
    background: #ff8722;
    border-radius: 22px;
    font-size: 32rx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 88rpx;
    margin: 0 auto;
    margin-top: 50rpx;
    text-align: center;
}

.van-tab--active {
    font-size: 32rpx !important;
}
</style>
